<template>
  <div class="fans-bar-chart" :style="customStyle">
    <div ref="chartRef" class="chart-container"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  name: "FansBar",
  props: {
    customStyle: {
      type: Object,
      default: () => ({}),
    },
    barWidth: {
      type: String,
      default: "20%", // 保持原有的默认值
    },
    // 添加柱状图位置控制属性（新添加）
    gridTop: {
      type: String,
      default: "0",
    },
    gridRight: {
      type: String,
      default: "0",
    },
    gridBottom: {
      type: String,
      default: "0",
    },
    gridLeft: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      chart: null,
      resizeTimer: null,
      chartData: [
        { value: 35 },
        { value: 52 },
        { value: 48 },
        { value: 38 },
        { value: 65 },
        { value: 45 },
        { value: 75 },
      ],
    };
  },
  // 添加watch监听barWidth变化，实现动态更新
  watch: {
    barWidth: {
      handler(newWidth) {
        if (this.chart) {
          this.chart.setOption({
            series: [
              {
                barWidth: newWidth,
              },
            ],
          });
        }
      },
      immediate: false,
    },
    // 添加grid位置属性的watch（新添加）
    gridTop: {
      handler(newValue) {
        this.updateGridPosition("top", newValue);
      },
    },
    gridRight: {
      handler(newValue) {
        this.updateGridPosition("right", newValue);
      },
    },
    gridBottom: {
      handler(newValue) {
        this.updateGridPosition("bottom", newValue);
      },
    },
    gridLeft: {
      handler(newValue) {
        this.updateGridPosition("left", newValue);
      },
    },
  },
  mounted() {
    this.initChart();
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
    if (this.resizeTimer) {
      clearTimeout(this.resizeTimer);
    }
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },
  methods: {
    initChart() {
      if (!this.$refs.chartRef) return;

      // 初始化图表
      this.chart = echarts.init(this.$refs.chartRef);

      // 获取数据
      const dataValues = this.chartData.map((item) => item.value);
      const lastIndex = dataValues.length - 1;

      // 图表配置
      const option = {
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          backgroundColor: "rgba(0, 0, 0, 0.7)",
          borderColor: "#348CF8",
          borderWidth: 1,
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          padding: 8,
          formatter: function (params) {
            return `数值: ${params[0].value}`;
          },
        },
        grid: {
          // 使用动态传入的位置属性
          top: this.gridTop,
          right: this.gridRight,
          bottom: this.gridBottom,
          left: this.gridLeft,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: dataValues.map((_, index) => index + 1),
          show: false,
        },
        yAxis: {
          type: "value",
          show: false,
        },
        series: [
          {
            type: "bar",
            data: dataValues,
            // 使用动态传入的barWidth
            barWidth: this.barWidth,
            itemStyle: {
              color: (params) => {
                // 只有最后一个柱子（当天数据）显示深颜色，其他显示浅颜色
                return params.dataIndex === lastIndex ? "#348CF8" : "#F2F2F2";
              },
              borderRadius: [3, 3, 0, 0],
            },
            emphasis: {
              itemStyle: {
                color: (params) => {
                  return params.dataIndex === lastIndex ? "#2978E6" : "#E5E5E5";
                },
              },
            },
          },
        ],
      };

      // 设置配置
      this.chart.setOption(option);
    },
    handleResize() {
      if (this.resizeTimer) {
        clearTimeout(this.resizeTimer);
      }
      this.resizeTimer = setTimeout(() => {
        if (this.chart) {
          this.chart.resize();
        }
      }, 100);
    },
  },
};
</script>
<style scoped>
.fans-bar-chart {
  width: 100%;
  height: 100px;
}

.chart-container {
  width: 100%;
  height: 100%;
}
</style>
